<template>
	<view>
		<view class="cu-bar bg-white " :class="[isTop?'margin-top':'margin-line']" @click="onSelectElement" :data-id="id">
			<view class="action" :class="[{'border-title':modal==1,'sub-title':modal==2,'title-style-3':modal==3}]">
				<text v-if="icon!=''" :class="['cuIcon-' + icon,'text-'+Bgcolor]"></text>
				<text class="text-bold" :class="['text-'+Bgcolor,fontsize]">{{title}}</text>
				<text v-if="modal==1" :class="['bg-'+Bgcolor]" style="width:3rem"></text>
				<!-- <text class="bg-gradual-blue" style="width:3rem"></text> -->
				<text v-else-if="modal==2&&hint!=''" class="text-ABC" :class="['text-'+Bgcolor]">{{hint}}</text>
				<text v-else-if="modal==2&&hint==''" :class="['bg-'+Bgcolor]"></text>
				<text v-else-if="modal==3" class="text-Abc self-end margin-left-sm" :class="['text-'+Bgcolor]">{{hint}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import config from '../../config/index.js'
	export default {
		computed: {
			...mapState({
				elementAttribute: state => state.diy.elementAttribute
			})
		},
		data() {
			return {
				parameter:{}
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var style = ""
				return style
			}
		},
		props: {
			...config,
			title: {
				type: [Number,String],
				default: '标题'
			},
			icon: {
				type: String,
				default: ''
			},
			modal: {
				type: [Number, String],
				default: 0
			},
			fontsize: {
				type: String,
				default: 'text-xl'
			},
			Bgcolor: {
				type: String,
				default: 'red'
			},
			hint: {
				type: String,
				default: ''
			},
			isTop: {
				type: [Boolean, String],
				default: false
			},
			id: {
				type: [Number, String],
				default: 0
			}
		},
		created() {
			
			//this.setElementValue();
		},
		methods: {
			...mapMutations(['setElementCurrent', 'updateElementAtrr']),
			onSelectElement(e) {
				this.setElementValue();
				this.$emit('onclick', true);
			},setElementValue:function(e){
				this.setElementCurrent(this.id);
				if(this.elementAttribute!=null){
					this.updateElementAtrr(this.elementAttribute);
				}else{
					console.log(this.$props)
					this.updateElementAtrr(this.$props);
				}
			}

		}
	}
</script>

<style scoped>

</style>
